<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input class="input" type="text" />
    <script>
      // input 搜索如何防抖，如何处理中文输入
      // 事件触发后，n秒后再执行回调
      const ipt = document.querySelector(".input");

      /**
       * @param {fn} 需要防抖的函数
       * @param {time} 防抖的时间
       * */
      function debounce(fn, time) {
        let timer = 0;
        return function (args) {
          clearInterval(timer);
          timer = setTimeout(function () {
            fn.call(this, args);
          }, time);
        };
      }

      function ajax(val) {
        console.log("val", val);
      }

      const test = debounce(ajax, 1500);

      ipt.addEventListener("keyup", (e) => {
        test(e.target.value);
      });

      //       1.compositionstart，键盘按下的时候触发，此时可能你刚刚按下一个n，但是这个并不是英文输入法的n。

      // 2.compositionupdate，每次输入中文输入法的拼音就会触发，并且这个事件触发会紧接着触发一个input事件。

      // 3.compositionend，输入框的拼音变成中文的时候触发，或者结束中文输入也会触发(在中文输入的时候，按esc或者失去焦点)
    </script>
  </body>
</html>
